﻿<template>
    <el-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1000"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            autocomplete="off"
            label-width="100px"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="菜单编码" prop="menuCode">
                        <el-input v-model="entityObj.menuCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="菜单名称" prop="menuName">
                        <el-input v-model="entityObj.menuName" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="菜单路径" prop="menuPath">
                        <el-input v-model="entityObj.menuPath" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="路由路径">
                        <el-input v-model="entityObj.routePath" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="菜单图标">
                        <el-input v-model="entityObj.menuIcon" />
                        <!-- <el-radio-group v-model="entityObj.menuIcon" class="ml-4">
                            <el-radio label="el-icon-user-filled" size="large">
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-shop" size="large">
                                <el-icon>
                                    <Shop />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-briefcase" size="large">
                                <el-icon>
                                    <Briefcase />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-list" size="large">
                                <el-icon>
                                    <List />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-info-filled">
                                <el-icon>
                                    <InfoFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-success-filled" size="large">
                                <el-icon>
                                    <SuccessFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-warning-filled" size="large">
                                <el-icon>
                                    <WarningFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-more-filled" size="large">
                                <el-icon>
                                    <MoreFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-tools" size="large">
                                <el-icon>
                                    <Tools />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-home-filled" size="large">
                                <el-icon>
                                    <HomeFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-menu" size="large">
                                <el-icon>
                                    <Menu />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-upload-filled" size="large">
                                <el-icon>
                                    <UploadFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-avatar" size="large">
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-help-filled" size="large">
                                <el-icon>
                                    <HelpFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-star-filled" size="large">
                                <el-icon>
                                    <StarFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-histogram" size="large">
                                <el-icon>
                                    <Histogram />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-grid" size="large">
                                <el-icon>
                                    <Grid />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-management" size="large">
                                <el-icon>
                                    <Management />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-checked" size="large">
                                <el-icon>
                                    <Checked />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-ticket" size="large">
                                <el-icon>
                                    <Ticket />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-trendCharts" size="large">
                                <el-icon>
                                    <TrendCharts />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-chrome-filled" size="large">
                                <el-icon>
                                    <ChromeFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-switch-filled" size="large">
                                <el-icon>
                                    <SwitchFilled />
                                </el-icon>
                            </el-radio>
                            <el-radio label="el-icon-opportunity" size="large">
                                <el-icon>
                                    <Opportunity />
                                </el-icon>
                            </el-radio>
                        </el-radio-group> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="菜单类型" prop="menuType">
                        <el-select
                            placeholder="---请选择菜单类型---"
                            v-model="entityObj.menuType"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in optionsMenuType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="上级菜单" prop="parentId">
                        <el-tree-select
                            ref="parentId"
                            v-model="entityObj.parentId"
                            :data="optionsMenuTree"
                            :default-expand-all="true"
                            check-strictly
                            filterable
                            style="width: 240px"
                            :props="{ label: 'menuName', value:'menuId',children: 'children' }"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="排序" prop="sort">
                        <el-input-number v-model="entityObj.sort" style="width: 100%" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="状态" prop="status">
                        <el-switch
                            v-model="entityObj.status"
                            :active-value="1"
                            :inactive-value="0"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button
                v-if="mode != 'show'"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                status: 1,
            },
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            storeProps: {
                label: "storeName",
                value: "storeId",
            },
            supplierProps: {
                label: "supplierName",
                value: "supplierId",
            },
            optionsMenuType: [],
            optionsMenuTree: [],
            //验证规则
            rules: {
                menuCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
                menuName: [
                    { required: true, type: "string", message: "请填写" },
                ],
                menuPath: [
                    { required: true, type: "string", message: "请填写" },
                ],
                menuType: [
                    { required: true, type: "number", message: "请填写" },
                ],
                parentId: [
                    { required: true, type: "number", message: "请填写" },
                ],
                sort: [{ required: true, type: "number", message: "请填写" }],
                status: [{ required: true, type: "number", message: "请填写" }],
            },
        };
    },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    try {
                        if (
                            this.entityObj.password !=
                            this.entityObj.confirmPassword
                        ) {
                            this.$message.success("输入的密码不一致");
                            return false;
                        }
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                this.mode == "Add"
                                    ? "menu/create"
                                    : "menu/update",
                                { ...this.entityObj }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.visible = false;
                            this.isSaveing = false;
                            this.$message.error("操作失败:" + returnValue.msg);
                        }
                    } catch (error) {
                        this.loading = false;
                        this.visible = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
        //表单注入数据
        async setData(data) {
            console.log(2222)
            console.log(data)
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "menu/option-trees", 
                    { status: 1, notMenuType: 3, orgMenuType: data.orgType }
                );
                if (returnValue.status == 200) {
                    this.optionsMenuTree = [...returnValue.response];
                    this.$nextTick(() => {
                        this.entityObj = { ...data };
                    });
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async storeSelectProcess(val) {
            console.log(val);
            this.entityObj.pId = val.storeId;
        },
        async supplierSelectProcess(val) {
            this.entityObj.pId = val.supplierId;
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["MenuType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsMenuType = returnValue.response.find(
                        (p) => p.code == "MenuType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        //this.entityObj.orgName=tool.data.get("USER_INFO").OrgName;
        await this.initOptions();
    },
};
</script>

<style></style>
